<template>
  <div class="about">
    <div ref="svgGrid" style="min-height: 800px" class="svg-container" @contextmenu.prevent="onContextmenu"></div>
    <el-dialog
      title="PQI折线图"
      :visible.sync="pqiDialogVisible"
      width="50%"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
    >
      <chart-comp />
    </el-dialog>
  </div>
</template>

<script>
import ChartComp from '@/components/ChartComp.vue'
import * as d3 from 'd3'
import panzoom from 'panzoom'
export default {
  components: {
    ChartComp
  },
  data () {
    return {
      pqiDialogVisible: false,
      svg: require('@/assets/15291.svg'),
      panzoomModel: null
    }
  },
  mounted () {
    this.show()
  },
  methods: {
    onContextmenu (event) {
      const self = d3.select(event.path[1])
      const id = self.node().id

      if (id === '36000002') {
        this.$contextmenu({
          items: [
            {
              label: '查看折线图',
              onClick: () => {
                this.pqiDialogVisible = true
              }
            }
          ],
          event,
          zIndex: 9,
          minWidth: 120
        })
      }
      return false
    },
    async show () {
      const { data: svg } = await this.$http.get(this.svg)
      this.$refs.svgGrid.innerHTML = svg
      this.panzoomModel = panzoom(this.$refs.svgGrid, {
        maxZoom: 15,
        minZoom: 1,
        initialZoom: 1
      })
    }
  }
}
</script>
